//接口代理的方式————当我们访问api的基础地址的时候这里会拦截跳转到目标地址
//在vue页面请求axios的时候默认地址'api'+请求的具体地址时，这里就会调用进行替换
//例如跳转请求： 请求'/product'，就是请求https://mall-pre.springboot.cn/api/product  但是这里的api会被置为空
module.exports = {
  devServer:{
    port: 8080,
    proxy:{
      '/api':{
        target:'http://3x6686992i.zicp.vip',
        changeOrigin:true,
        //路径转发
        pathRewrite:{
          '/api': ''
        }
      }
    }
  },
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          // remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
          // 假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
          require('postcss-px2rem')({
            remUnit: 191
          })
        ]
      }
    }
  },
}